import 'package:cached_network_image/cached_network_image.dart';
import 'package:flutter/material.dart';
import 'package:carousel_slider/carousel_slider.dart';
import 'package:flutter_riverpod/flutter_riverpod.dart';
import 'package:insail_flutter_boot_template/feature/home/presentation/controllers/home_controller.dart';
// import 'package:flutter_cache_manager/flutter_cache_manager.dart';

class CarouselWidget extends ConsumerStatefulWidget {
  const CarouselWidget({super.key});

  @override
  ConsumerState<ConsumerStatefulWidget> createState() => _CarouselWidgetState();
}

class _CarouselWidgetState extends ConsumerState<CarouselWidget> {
  int _current = 0;
  final CarouselSliderController _controller = CarouselSliderController();

  @override
  Widget build(BuildContext context) {
    final slideAsyncValue = ref.watch(carouselProvider);

    return slideAsyncValue.when(
      data: (slides) {
        return Stack(
          alignment: AlignmentDirectional.bottomCenter,
          children: [
            Container(
              decoration: BoxDecoration(
                borderRadius: BorderRadius.circular(10.0),
              ),
              child: CarouselSlider.builder(
                carouselController: _controller,
                options: CarouselOptions(
                  height: 180,
                  viewportFraction: 1.0,
                  autoPlay: true,
                  autoPlayInterval: const Duration(seconds: 3),
                  onPageChanged: (index, reason) {
                    setState(() {
                      _current = index;
                    });
                  },
                ),
                itemCount: slides.length,
                itemBuilder:
                    (BuildContext context, int index, int pageViewIndex) {
                  return GestureDetector(
                    onTap: () {
                      // 点击处理
                    },
                    child: ClipRRect(
                      borderRadius: BorderRadius.circular(0.0), // 保留圆角
                      child: SizedBox(
                        width: MediaQuery.of(context).size.width,
                        height: 160,
                        child: CachedNetworkImage(
                          imageUrl: slides[index].imageUrl,
                          fit: BoxFit.fill, // 填满父容器
                          placeholder: (context, url) =>
                              const Center(child: CircularProgressIndicator()),
                          errorWidget: (context, url, error) =>
                              const Icon(Icons.error),
                        ),
                      ),
                    ),
                  );
                },
              ),
            ),
            Row(
              mainAxisAlignment: MainAxisAlignment.center,
              children: slides.asMap().entries.map((entry) {
                return GestureDetector(
                  onTap: () => _controller.animateToPage(entry.key),
                  child: Container(
                    width: 10.0,
                    height: 10.0,
                    margin: const EdgeInsets.symmetric(
                        vertical: 8.0, horizontal: 4.0),
                    // 修饰点
                    // decoration: BoxDecoration(
                    //     shape: BoxShape.circle,
                    //     color: (Theme.of(context).brightness != Brightness.dark
                    //             ? Colors.white
                    //             : Colors.black)
                    //         .withOpacity(_current == entry.key ? 0.9 : 0.4)),
                  ),
                );
              }).toList(),
            ),
          ],
        );
      },
      loading: () => const Center(child: CircularProgressIndicator()),
      error: (error, stack) => Center(child: Text('Error: $error')),
    );
  }
}
